<template>
    <div>
        <div style="margin-bottom:10px;">
            <Button type="success" @click="handleRender(1)">添加</Button>
            <Button type="success" @click="handleRender(2)">修改</Button>
            <Button type="error" @click="handleDelete">删除</Button>
            <Modal v-model = "modal1" title= "输入框">
                <Form :model="formItem" :label-width="80" ref="formItem" :rules="ruleValidate">
                    <FormItem label="分类名:" prop="text">
                        <Input v-model="formItem.text" placeholder="请输入分类项"></Input>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="primary" @click="handleSubmit('formItem')">提交</Button>
                    <Button @click="handleReset('formItem')" style="margin-left: 8px">重置</Button>
                    <Button @click="handleExit('formItem')" style="margin-left: 8px">关闭</Button>
                </div>
            </Modal>
            
        </div>
        
        <hr>
        <div style="margin-top:10px;">
            <Button type="primary" @click="Shows(1)">新闻</Button>
            <Button type="primary" @click="Shows(2)">产品</Button>
        </div>
        
        <Tree :data="data2" show-checkbox @on-check-change="Checked" @on-select-change="Selected" ref="tree"></Tree>
    </div>
    
</template>

<script>
export default {
    data () {
        return {
            data2     : [],
            modal1    : false,
            SelectCate: [],
            NowText   : '',
            ID        : '',
            bstop     : '',
            value     : '',
            PID       : '',
            myType    : '',
            formItem  : {
                text: ''
            },
            ruleValidate: {
                text: [
                    { required: true, message: '值不能为空', trigger: 'change',type:'string'}
                ]
            }
        }
    },
    methods: {
        Shows(type){
            this.axios({
                url   : `http://localhost:3000/cate/list/${type}`,
                method: 'post'
            }).then(res=>{
                this.data2 = res.data
            })
            this.myType = type
        },
        Checked(r,n){
            this.SelectCate = r
        },
        Selected(r,n){
            this.ID      = ''
            this.ID      = n._id
            this.PID     = n.parentId
            this.NowText = n.text
        },
        handleRender (s) {
            if(s==1){
                if(this.$refs['tree'].getSelectedNodes().length>0){
                    this.modal1 = true
                    this.bstop  = s
                }else{
                    this.$Modal.confirm({
                        title  : '确认框',
                        content: '请点击根目录添加子目录，您确定添加根目录？',
                        onOk   : () => {
                            this.modal1 = true
                            this.bstop  = s
                        },
                        onCancel: () => {
                            this.bstop = '';
                            this.$Message.info('取消添加');
                        }
                    })
                }
            }else if(s==2){
                if(this.$refs['tree'].getSelectedNodes().length>0){
                    this.formItem.text = this.NowText;
                    this.modal1        = true;
                    this.bstop         = s;
                }else{
                    this.$Message.error('请选择修改目录');
                }
            }
            
        },
        handleSubmit(name){
            this.$refs[name].validate((valid) => {
                if(valid){
                    this.formItem.type = this.myType
                    if(this.bstop&&this.bstop==1){
                        if(this.ID){
                            this.formItem.parentId = this.ID
                            this.axios({
                                url   : "http://localhost:3000/cate/",
                                method: 'post',
                                data  : this.formItem
                            }).then(res=>{
                                this.ID = '';
                                delete this.formItem.parentId;
                                this.Shows(this.myType);
                                this.$refs[name].resetFields();
                                this.modal1 = false;
                            })
                        }else{
                            this.axios({
                                url   : "http://localhost:3000/cate/",
                                method: 'post',
                                data  : this.formItem
                            }).then(res=>{ 
                                this.Shows(this.myType);
                                this.$refs[name].resetFields();
                                this.modal1 = false;
                            })
                        }
                    }else if(this.bstop&&this.bstop==2){
                        if(this.ID){
                            this.axios({
                                url   : `http://localhost:3000/cate/${this.ID}`,
                                method: 'put',
                                data  : this.formItem
                            }).then(res=>{
                                this.Shows(this.myType);
                                this.$refs[name].resetFields();
                                this.modal1 = false;
                            })
                        }
                    }
                }else {
                    this.$Message.error('失败!请正确填写');
                }
            })
        },
        handleReset(name){
            this.$refs[name].resetFields();
        },
        handleExit(name){
            this.$refs[name].resetFields();
            this.modal1 = false;
        },
        handleDelete(){
            if(this.SelectCate.length>0){
                this.$Modal.confirm({
                    title  : '确认框',
                    content: '确定删除所选目录及其所有子目录吗？',
                    onOk   : () => {
                        var SelectArray = []
                        for(var i=0;i<this.SelectCate.length;i++){
                            SelectArray.push(this.SelectCate[i]._id)
                        }
                        var NEWarray = SelectArray.join(',')
                        this.axios({
                            url   : `http://localhost:3000/cate/${NEWarray}`,
                            method: 'delete',
                        }).then(res=>{
                            this.Shows(this.myType);
                            this.$Message.info('删除成功');
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除');
                    }
                })
            }else{
                this.$Message.error('请选择需要删除的目录');
            }
        }
    },
    mounted(){
        this.Shows(1)
    }
}
</script>